<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>

        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 模拟数据
        var datas = [
            {
                name: '刘亦菲1',
                age: 20,
                sex: '女'
            },
            {
                name: '刘亦菲2',
                age: 20,
                sex: '女'
            },
            {
                name: '刘亦菲3',
                age: 20,
                sex: '女'
            },
            {
                name: '刘亦菲4',
                age: 20,
                sex: '女'
            },
            {
                name: '刘亦菲5',
                age: 20,
                sex: '女'
            },
            {
                name: '刘亦菲6',
                age: 20,
                sex: '女'
            }
        ]

        var tbody = document.querySelector('tbody')
        // 2.创建行 你有多少datas我就有多少行 循环
        for (var i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr')
            tbody.appendChild(tr)
            // 3.创建列 你datas有多少属性我就有多少行 所以遍历对象得到属性
            for (var k in datas[i]) {
                var td = document.createElement('td')
                tr.appendChild(td)
                // 4.填充内容 也就是datas里的属性值添加到列里  data[i][k] 代表属性值 所以
                td.innerHTML = datas[i][k]
            }
            // 5.创建表格专用的删除列 还是datas有多少我就创建多少删除列 所以写在循环里
            var td = document.createElement('td')
            tr.appendChild(td)
            td.innerHTML = "<a href = 'javascript:;'>删除</a>"
        }
        // 6.整个创建完毕后删除当前行 所以写在循环外 因为不知道是会删那一行 所以给全部a循环注册点击事件
        // (1) 获取事件源
        var as = document.querySelectorAll('a')
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                tbody.removeChild(this.parentNode.parentNode)
            }
        }






















































        // // 1.先准备好 数据
        // var datas = [
        //     {
        //         name: '刘亦菲',
        //         subject: '滑雪',
        //         score: 100
        //     },
        //     {
        //         name: '林青霞',
        //         subject: '跳伞',
        //         score: 100
        //     },
        //     {
        //         name: '颖儿',
        //         subject: '滑冰',
        //         score: 100
        //     },
        //     {
        //         name: '未知',
        //         subject: '蹦极',
        //         score: 100
        //     },

        // ]
        // // 2.创建行
        // var tbody = document.querySelector('tbody')
        // for (var i = 0; i < datas.length; i++) {
        //     var tr = document.createElement('tr')
        //     tbody.appendChild(tr)
        //     // 3.创建列 列的数量是由属性决定的
        //     for (var k in datas[i]) {// datas[i] 就把他理解为调用对象属性把
        //         // 有几个属性就创建几列
        //         var td = document.createElement('td')
        //         tr.appendChild(td)
        //         //4.数值值赋予给列
        //         td.innerHTML = datas[i][k]
        //     }
        //     // 5.创建删除列
        //     var td = document.createElement('td')
        //     tr.appendChild(td)
        //     td.innerHTML = "<a href='javascript:;'>删除</a>"
        // }
        // // 6.全部创建完毕后 可以删除某一行
        // var as = document.querySelectorAll('a')
        // // var tr = document.querySelectorAll('tr')
        // for (var i = 0; i < as.length; i++) {
        //     as[i].onclick = function () {
        //         tbody.removeChild(this.parentNode.parentNode)
        //     }
        // }



    </script>
</body>

</html>